<template>
  <!-- 编辑表单 -->

  <!--@ok="editTrue('editForm')"-->
  <!--@cancel="editClose('editForm')"-->

  <a-modal v-model="editShow" title="编辑"
           destroyOnClose
           :closable=false
           centered
           :maskClosable=false
           width="auto"
           class="edit-modal"
  >
    <!-- 自定义页脚 -->
    <template slot="footer">
      <a-button key="back" @click="editClose('editForm')">
        取消
      </a-button>
      <a-button key="submit" type="primary" @click="editTrue('editForm')">
        确定
      </a-button>
    </template>

    <!-- 表单 -->
    <el-form :model="editForm" :rules="editRules" ref="editForm" size="small" label-width="auto">

      <!-- S/N -->
      <el-form-item label="S/N：" prop="id">
        <el-input v-model="editForm.id" placeholder="请输入" disabled></el-input>
      </el-form-item>

      <!-- 区域 -->
      <el-form-item label="点位：" prop="area">
        <el-input v-model="editForm.area" placeholder="请输入" @input="inputChange"></el-input>
      </el-form-item>

      <!-- 点位号 -->
      <el-form-item label="区域：" prop="point">
        <el-input v-model="editForm.point" :disabled="true" placeholder="请输入"></el-input>
      </el-form-item>
      <p v-if="pointShowWord" style="color: #f5222d;padding-left: 100px;">{{ pointCheckMsg }}，请检查之后再输入</p>

    </el-form>

  </a-modal>
</template>

<script>
export default {
  name: 'editForm',
  props: {
    editShow: {
      type: Boolean,
      default: () => false
    },
    editFormId: {
      default: () => ''
    },
    editFormSn: {
      default: () => ''
    },
    editFormPoint: {
      default: () => ''
    },
    editFormArea: {
      default: () => ''
    }
  },
  watch: {
    // // 进入弹窗时，如果有值，就触发函数
    // editShow: function(newVal, oldVal) {
    //   if (newVal === '') {
    //     return;
    //   }
    //   // this.inputChange();
    // },
    // 监听props中的editFormId变化
    editFormId: function(newVal, oldVal) {
      // 将props中的id值填入表单
      this.editForm.id = this.editFormSn;
    },
    editFormPoint: function(newVal, oldVal) {
      // console.log(newVal,oldVal);
      // 判断传过来的点位号是否为真，真则填入表单
      if (newVal !== oldVal) {
        this.editForm.area = this.editFormPoint;
      }
    },
    editFormArea: function(newVal, oldVal) {
      // console.log(newVal,oldVal);
      // 判断传过来的区域是否为真，真则填入表单
      if (newVal !== oldVal) {
        this.editForm.point = this.editFormArea;
      }
    },
    // 监听表单中的area（区域）变化，触发防抖函数
    // 'editForm.area': function(newVal, oldVal) {
    //   if (oldVal !== '') {
    //     // this.inputChange();
    //   }
    // },
  },
  data() {
    return {
      // 编辑表单数据
      editForm: {
        id: '',
        area: '',
        point: ''
      },
      point: '',
      pointCheckMsg: '',
      // 表格编辑表格验证
      editRules: {
        sn: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度最长为 30 个字符', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入点位号', trigger: 'blur' }
        ],
        point: [
          { required: true, message: '请输入区域', trigger: 'blur' }
        ]
      },
      pointShowWord: false
    };
  },
  methods: {
    // 编辑表单确定提交
    editTrue(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          // 提交
          const res = await this.$api.equipment.get1024Edit({
            serialId: this.editForm.id,
            pointId: this.editForm.area
          });
          if (res.data.status) {
            // 提示编辑成功
            this.$message.success('编辑成功');
            this.$nextTick(() => {
              // 向父组件传递数据进行，关闭弹窗
              this.isShow();
              // 刷新列表
              this.$emit('getTable', 1);
              // 重置页码
              this.$emit('getCurrentPage', 1);
              // 清空表单
              this.editClose('editForm');
            });
          }
        } else {
          return false;
        }
      });
    },
    // 编辑表单取消
    editClose(formName) {
      // console.log(this.editForm.area);
      this.editForm.area = 1000000;
      this.$refs[formName].resetFields();
      this.pointShowWord = false;
      this.$nextTick(() => {
        this.isShow();
      });
    },

    isShow() {
      this.$emit('isShow', false);
    },

    areaChange() {
      // 如果输入框的值不为空，向后台发送验证
      if (this.editForm.area !== '') {
        this.$api.equipment.getCheckpoint({
          searchPointId: this.editForm.area,
          // searchPointId: "10",
        })
          .then(res => {
            // console.log(res);
            if (res.data.status === true) {
              // 表单内的值显示点位名称
              this.editForm.point = res.data.data.districtCodeName;
              this.pointShowWord = false;
              // 表单外的值显示点位号
              this.point = res.data.data.districtCode;
            } else if (res.data.status === false) {
              this.pointShowWord = true;
              this.pointCheckMsg = res.data.msg;
              this.editForm.point = '';
            }
          });
      }
    },
  },
  mounted() {
    // 输入框节流事件，点位查询，通过输入框的input事件执行
    this.inputChange = _.debounce(this.areaChange, 1500);
  }
};
</script>

<style scoped lang="less">

  /deep/ .el-input__inner {
    width: 420px;
  }
</style>
<style>
  .edit-modal .ant-modal-body {
    padding: 48px 49px 48px 45px;


  }

  .edit-modal .ant-modal-body .el-form-item {
    margin-bottom: 32px;
  }


</style>
